<template>
    <div class="app-container">
        <el-divider>上传区</el-divider>
        <el-upload
                class="upload-demo"
                drag
                action="ws/api/user/sys/uploadFile"
                :on-success="uploadSuccess"
                multiple
        >
            <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
            <div class="el-upload__text">
                拖动上传 或 <em>点击选择上传</em>
            </div>
            <template #tip>
                <div class="el-upload__tip">
                    jpg/png files with a size less than 500kb
                </div>
            </template>
        </el-upload>

        <el-form ref="form" :model="form" label-width="80px">
            <el-divider>所有照片</el-divider>
            <div class="demo-image__placeholder">
                <el-image
                        v-for="img in imgArr"
                        :key="img.id"
                        :src= "img.url"
                        class="block"
                        @click="clickImg(img.id)"/>
            </div>
            <el-divider>匹配结果</el-divider>
            <div class="demo-image__placeholder">
                <el-image
                        v-for="img in imgArr2"
                        :key="img.id"
                        :src= "img.url"
                        class="block"
                        @click="clickImg(img.id)"/>
            </div>
        </el-form>

    </div>
</template>

<script>

    import {Search,Edit,Check,Message,Star,Upload,UploadFilled} from "@element-plus/icons";
    import request from "../../utils/request";
    import {ElMessage} from "element-plus";

    export default {
        name: "ImgManager",
        components: {
            Search,
            Upload,
            UploadFilled
        },
        data(){
            return {
                form:{},
                imgArr:[],
                imgArr2:[]
            }
        },
        created(){
            this.getAllImg();
        },
        methods: {
            clickImg(imgId){
                request.get("/api/user/sys/imgClick",
                    {params:{id:imgId}}
                ).then(resp=>{
                    if(resp.status =='M0200'){
                        this.imgArr2=resp.data;
                        console.log(this.imgArr)
                    }else{
                        ElMessage({
                            message:"异常请联系管理员:",
                            type:"error"
                        })
                    }
                })
            },
            uploadSuccess(){
                ElMessage({
                    message:"上传成功",
                    type:"success"
                })
                this.getAllImg();
            },
            getAllImg(){
                request.get("/api/user/sys/getAllImg").then(resp=>{
                    if(resp.status =='M0200'){
                        this.imgArr=resp.data;
                        console.log(this.imgArr)
                    }else{
                        ElMessage({
                            message:"异常请联系管理员:",
                            type:"error"
                        })
                    }
                })
            }

        }

    }

</script>
<style scoped>
    .demo-image__placeholder .block {
        padding: 30px 0;
        text-align: center;
        border-right: solid 1px var(--el-border-color);
        display: inline-block;
        width: 30%;
        box-sizing: border-box;
        vertical-align: top;
    }
    .demo-image__placeholder .demonstration {
        display: block;
        color: var(--el-text-color-secondary);
        font-size: 14px;
        margin-bottom: 20px;
    }
    .demo-image__placeholder .el-image {
        padding: 0 10px;
        max-width: 300px;
        max-height: 200px;
    }

    .demo-image__placeholder.image-slot {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background: var(--el-fill-color-light);
        color: var(--el-text-color-secondary);
        font-size: 14px;
    }
    .demo-image__placeholder .dot {
        animation: dot 2s infinite steps(3, start);
        overflow: hidden;
    }
</style>
